<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    box-sizing: border-box;
  }

  .clock {
    width: 600px;
    height: 600px;
    background: url(./images/clock.jpg) no-repeat;
    margin: 50px auto 0;
    position: relative;
  }

  .hh,
  .mm,
  .ss {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(./images/hour.png) no-repeat center;
  }

  .mm {
    background-image: url(./images/minute.png);
    transform: rotate(270deg);
  }

  .ss {
    background-image: url(./images/second.png);
    transform: rotate(0deg);
  }
</style>
<body>
  <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>

  
</body>
<script>
  const ss= document.querySelector('.clock .ss');
  let a=0
  setInterval(function(){
  
    ss.style.transform=`rotate(${a+=6}deg)`
  },500)

</script>
</html>